<template>
  <div class="card w-full max-w-md shadow-2xl forgot-container bg-base-100/80">
    <div class="card-body">
      <!-- 标题区域 -->
      <div class="text-center mb-6">
        <div class="avatar mb-4">
          <div class="w-20 rounded-full bg-primary text-primary-content flex items-center justify-center">
            <font-awesome-icon icon="key" size="2x"></font-awesome-icon>
          </div>
        </div>
        <h1 class="text-3xl font-bold text-primary">找回密码</h1>
        <p class="text-base-content/70 mt-2">请输入您的邮箱来重置密码</p>
      </div>

      <!-- 密码重置表单 -->
      <form class="space-y-6">
        <!-- 邮箱输入 -->
        <div class="form-control">
          <label class="label">
                            <span class="label-text text-base-content">
                               <font-awesome-icon icon="envelope"></font-awesome-icon>邮箱地址
                            </span>
          </label>
          <input
              type="email"
              placeholder="请输入注册时使用的邮箱"
              class="input input-bordered input-primary w-full"
              required
          />
          <label class="label">
                            <span class="label-text-alt text-warning">
                               <font-awesome-icon icon="info-circle"></font-awesome-icon>
                                我们将发送重置链接到您的邮箱
                            </span>
          </label>
        </div>

        <!-- 发送重置链接按钮 -->
        <div class="form-control mt-6">
          <button type="submit" class="btn btn-primary w-full">
            <font-awesome-icon icon="paper-plane"></font-awesome-icon>发送重置链接
          </button>
        </div>
      </form>

      <!-- 进度指示器（发送成功后显示） -->
      <div id="success-message" class="hidden">
        <div class="alert alert-success mt-6">
          <font-awesome-icon icon="check-circle" size="lg"></font-awesome-icon>
          <span>重置链接已发送！请检查您的邮箱</span>
        </div>

        <div class="mt-4 p-4 bg-base-200 rounded-lg">
          <div class="flex items-center mb-2">
            <font-awesome-icon icon="lightbulb" class="text-warning"></font-awesome-icon>
            <span class="font-medium">温馨提示：</span>
          </div>
          <ul class="text-sm space-y-1">
            <li>• 检查垃圾邮件文件夹</li>
            <li>• 链接有效期为30分钟</li>
            <li>• 如未收到邮件，请稍后重试</li>
          </ul>
        </div>
      </div>

      <!-- 返回登录链接 -->
      <div class="text-center mt-8">
        <router-link class="link link-primary" to="/guest/login">
          <font-awesome-icon icon="arrow-left"></font-awesome-icon>返回登录
        </router-link>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
</script>